<template>
    <!-- 表单区域 -->
    <el-form :inline="true" :model="formData" class="demo-form-inline">

        <!-- 采购日期选择器 -->
        <el-form-item label="出库日期">
            <el-date-picker v-model="formData.ooDate" type="date" placeholder="出库日期"></el-date-picker>
        </el-form-item>
        <!-- 采购员输入框，禁用状态 -->
        <el-form-item>
            <el-input v-model="formData.outbound" placeholder="采购员" disabled></el-input>
        </el-form-item>

        <!-- 摘要输入框 -->
        <el-form-item>
            <el-input v-model="formData.brief" placeholder="备注"></el-input>
        </el-form-item>
    </el-form>
    <!-- 产品表格 -->
    <el-table :data="ooTableData" style="width: 100%">
        <!-- 产品编号列 -->
        <el-table-column fixed prop="productId" label="产品id" width="60"></el-table-column>
        <!-- 产品名称列 -->
        <el-table-column fixed prop="productName" label="名称" width="120"></el-table-column>
        <el-table-column fixed prop="qty" label="数量" width="120"></el-table-column>
        <el-table-column fixed prop="shelfLife" label="shelfLife" width="120"></el-table-column>
        <el-table-column fixed prop="productionDate" label="productionDate" width="120"></el-table-column>
        <el-table-column fixed prop="type" label="type" width="120"></el-table-column>
        <el-table-column fixed prop="batchId" label="batchId" width="200"></el-table-column>
        
        <el-table-column label="数量" width="150">
            <template #default="scope">
                <el-input-number v-model="scope.row.outQty" size="small" :min="scope.row.qty" :max="scope.row.maxQty" @change="change(scope.row)"></el-input-number>
            </template>
        </el-table-column>
        <!-- 备注列 -->
        <el-table-column label="备注" width="300">
            <template #default="scope">
                <el-input v-model="scope.row.brief" placeholder="备注"></el-input>
            </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column fixed="right" label="操作" min-width="100">
            <template #default="scope">
                <el-button type="primary" size="small" @click="del(scope)">删除</el-button>
                <el-button type="success" size="small" @click="select(scope)">选择批次</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 保存按钮 -->
    <el-button type="primary" @click="onSubmit">保存

    </el-button>
    <el-drawer title="选择批次" v-model="drawer" :with-header="false" size="70%">
            <template #default="scope">
                <el-table :data="store.tempBatch" style="width: 100%">
                    <el-table-column prop="batchId" label="批次号" width="120"></el-table-column>
                    <el-table-column prop="qty" label="库存数量" width="120"></el-table-column>
                    <el-table-column prop="productionDate" label="过期日期" width="120"></el-table-column>
                    <el-table-column prop="shelfLife" label="保质期" width="120"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                        <template #default="scope">
                            <el-button type="primary" size="small" @click="selectBatch(scope)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-drawer>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { dayjs, ElMessage } from 'element-plus';
import { wmsStore } from '@/store/pinia';
import { inventoryApi, ooApi, orderApi } from '@/api';
import {useRoute ,useRouter} from 'vue-router'
const router = useRouter()
const route = useRoute()
const store = wmsStore();
const ooTableData = ref<any>([]);
const batchId = ref<any>([]);


// 表单数据对象
const formData = reactive<any>({
    ooDate: dayjs().add(1, 'day').format('YYYY-MM-DD'),
    orderId: "",
    outbound: store.nickName,
    brief: '',
    status:0
});

onMounted(() => {
    formData.orderId = route.query.orderId 
    orderApi.selectItems.call({ orderId: formData.orderId }).then((res) => {
        ooTableData.value = res
    });
    ooApi.select.call({ orderId: formData.orderId }).then((res) => {
        console.log(res)
        ooApi.selectItems.call({ ooid: res[0].id }).then((res) => {

            console.log(res)
        })
    });
})

 const drawer = ref(false);


const select = (scope: any) => {
    
    inventoryApi.selectBatch.call({ productId: scope.row.productId }).then((res) => {
        
        console.log(res);
        
        store.tempOrder.push(scope.row);
        store.tempOrder.splice(scope.$index, 1);
        store.tempBatch = res;
    });

    drawer.value = true;
};
const selectBatch = (scope: any) => {
    batchId.value.push(scope.row.batchId);
    ooTableData.value.forEach((element: any) => {
        if (element.productId == scope.row.productId) {
            element.batchId = scope.row.batchId;
            element.productionDate = scope.row.productionDate;
            element.shelfLife = scope.row.shelfLife;
            element.maxQty=scope.row.qty
        }
    });
    drawer.value = false;
};
// 提交表单
const onSubmit = () => {
 
    let params = {
        ooData: formData.ooDate,
        outbound: formData.outbound,
        brief: formData.brief,
        items: ooTableData.value,
        orderId: formData.orderId
    };
    ooApi.add.call(params).then((res) => {
        ElMessage.success("添加成功");
        store.tempOrder.push([])
    });
};

// 删除产品行
const del = (scope: any) => {
    store.tempOrder.splice(scope.$index, 1);
};


const change = (row: any) => {
    if (row.outQty < 1) {
        row.outQty = 1;
    }
};


</script>